<template>
	<view v-if="list.length>0" class="address_box">
		<view class="address_list">
			<up-swipe-action>
				<up-swipe-action-item :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id"
					@click="onClick(item)" @open="onOpen(item.id)" :options="options">
					<view class="address_item">
						<view class="address_left">

							<view class="add_title">
								<text v-if="item.isDefault==1" class="tag">默认</text> <text>{{item.name}}</text><text
									class="phone numbertype">{{ item.mobile }}</text>

							</view>
							<view class="add_desc">

								{{ item.provinceName }} {{ item.urbanName }} {{ item.areaName }} {{ item.address }}
							</view>
						</view>
						<view class="address_right" @click="setDefault(item)">
							<view class="radio" v-if="type==1"></view>
							<up-text v-if="item.isDefault!=1&&type!=1" type="error" text="设为默认"></up-text>
						</view>
					</view>
				</up-swipe-action-item>
			</up-swipe-action>

		</view>

	</view>
	<view class="fixbtn">
		<up-row>
			<up-col span="12">
				<view class="pr10">
					<up-button type="success" :plain="true" shape="circle" text="添加收货"
						@click="$u.route('/pages/my/address/detail')"></up-button>
				</view>
			</up-col>
			<!-- <up-col span="6">
				<view class="p10">
					<up-button type="success" icon="weixin-fill" shape="circle" text="微信添加"
						@click="getWxAddressList()"></up-button>
				</view>
			</up-col> -->
		</up-row>
	</view>
	<view v-if="list.length==0" class="empty_box"></view>
</template>

<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		getAddressApi,
		addAddressApi,
		setAddressDefaultApi
	} from '@/api/user.js'

	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				list: [],
				type: null,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
			})
			onLoad((res) => {
				if (res) {
					state.type = res.type
				}
				getData()

			})

			const getData = async () => {
				const {
					data
				} = await getAddressApi()
				state.list = data
			}
			const onClick = (item) => {
				console.log('item', item);
				uni.showModal({
					title: "提示",
					content: "您确定要删除吗",
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确认", // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: "#00CC71",
					cancelColor: "#ABABAB",
					success: (res) => {
						if (res.confirm) {
							let index = state.list.findIndex((res) => res.id == item.id)
							if (index === -1) {
								return false
							} else {
								state.list[index].show = false
							}
							uni.$u.toast("册除成功")
						} else {
							let index = state.list.findIndex((res) => res.id == item.id)
							if (index === -1) {
								return false
							} else {
								state.list[index].show = false
							}
							console.log("cancel"); //点击取消之后执行的代码
						}
					},
				});
			}
			const setDefault = async (item) => {
				uni.showLoading({
					title:'加载中...'
				})
				try{
					await setAddressDefaultApi(item.id)
					
					setTimeout(()=>{
						if (state.type == 1) {							
							uni.$emit('updateAddress',item.id)
							uni.navigateBack()
						} else {
							uni.$u.toast("设置成功！")
							getData()
						}
						uni.hideLoading()
					},1000)
					
				}catch{
					uni.hideLoading()
				}
				
				

			}
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			const onOpen = (id) => {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				state.list.forEach(item => {
					if (item.id == id) {
						item.show = true
					} else {
						item.show = false
					}
				})
			}



			// 微信获取收货地址
			const getWxAddressList = () => {

				uni.chooseAddress({
					success: async (res) => {
						await addAddressApi({
							"address": res.detailInfo,
							"areaId": '370101',
							"areaName": res.countyName, // 区
							"mobile": res.telNumber,
							"name": res.userName,
							"provinceId": "370000",
							"provinceName": res.provinceName, //省
							"urbanId": "370100",
							"urbanName": res.cityName // 市
						})
						uni.$u.toast("添加成功")
						getData()
					},
				});
			}

			return {
				...toRefs(state),
				getWxAddressList,
				onClick,
				setDefault,
				onOpen,
			}
		}

	}
</script>

<style lang="scss">
	.address_box {
		width: 100vw;
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.address_list {
		width: 100%;
		background-color: #ffffff;
	}

	.address_right {
		image {
			width: 22px;
			height: 22px;
		}
	}

	.address_item {
		padding: 36rpx 36rpx 24rpx;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		justify-content: space-between;

		.radio {
			width: 30rpx;
			height: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			border: 1px solid #ddd;
		}

		.active {
			background: #ff0101;
			border: 1px solid #ff0101;
		}
	}



	.phone {
		margin-left: 5px;
	}

	.add_title {
		font-weight: normal;
		font-size: 14px;
		line-height: 20px;
		color: #333333;
		display: flex;

		.tag {
			padding: 5rpx 8rpx;
			border: 1px solid #00aa00;
			margin-right: 16rpx;
			color: #00aa00;
			border-radius: 8rpx;
		}
	}

	.add_desc {
		font-weight: normal;
		font-size: 14px;
		line-height: 20px;
		color: #939393;
		margin-top: 5px;
	}

	.fixbtn {
		position: fixed;
		z-index: 10;
		padding: 10rpx 20rpx 0 20rpx;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));

		.p10 {
			margin-left: 10rpx;
		}

		.pr10 {
			margin-right: 10rpx;
		}

	}
</style>